<!--
 * @Descripttion: 运行值班首页
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-12 14:37:58
 * @LastEditTime: 2021-08-21 16:14:29
-->
<template>
    <div id="dutyHome">
        <!-- <van-nav-bar  title="运行值班" 
            left-arrow @click-left="back" @click-right="showDutyDetail">
             <template #right>
                <span class="staticText">运行值班信息</span>
                <img :src="dutyDetailShow?shrinkUrl:dropdownUrl" style="height:1rem;width:1rem;">
            </template>
        </van-nav-bar> -->
        <Theader title="选择记录类型" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
            <template slot="header_icon">
                <span class="staticText">运行值班信息</span>
                <img :src="dutyDetailShow?shrinkUrl:dropdownUrl" style="height:1rem;width:1rem;">
            </template>
        </Theader>
        <van-tabs v-model="activeName">
            <van-tab title="未完成" badge="3" name="a"></van-tab>
            <van-tab title="维护记录" badge="2" name="b"></van-tab>
            <van-tab title="异常记录" badge="10" name="c"></van-tab>
        </van-tabs>

        <!-- 维护记录 -->
        <div v-show="activeName=='b'" class="padding-outbox">
            <div @click="tojournalDetail" v-for="(item,index) in maintainList" :key="index" class="padding-inbox">
                <div class="flex-box">
                    <span class="dynamicText">{{item.text}}</span>
                    <span v-if="item.statue?true:false" class="staticText statueText">{{item.statue}}</span>
                </div>
                <div class="padding-top">
                    <span class="grayText">{{item.subText}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="contact" />
                    <span class="staticText">记录人：</span>
                    <span class="staticText">{{item.recorder}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="clock-o" />
                    <span class="staticText">记录时间：</span>
                    <span class="staticText">{{item.recordTime | timeFilter}}</span>
                </div>
            </div>
        </div>

        <!-- 未完成记录 -->
        <div v-show="activeName=='a'" class="padding-outbox">
            <div @click="tojournalDetail" v-for="(item,index) in unCompleteList" :key="index" class="padding-inbox">
                <div class="flex-box">
                    <span class="dynamicText">{{item.text}}</span>
                    <span v-if="item.statue?true:false" class="staticText statueText">{{item.statue}}</span>
                </div>
                <div class="padding-top">
                    <span class="grayText">{{item.subText}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="contact" />
                    <span class="staticText">记录人：</span>
                    <span class="staticText">{{item.recorder}}</span>
                </div>
                <div class="padding-top flexItem">
                    <van-icon name="clock-o" />
                    <span class="staticText">记录时间：</span>
                    <span class="staticText">{{item.recordTime | timeFilter}}</span>
                </div>
            </div>
        </div>

        <div v-show="activeName=='a'||activeName=='b'" style="height：4rem;">
            <van-row type="flex" justify="space-around">
                <van-col span="6">
                    <div class="whiteBtn" @click="toAdd">添加</div>
                </van-col>
                <van-col span="6">
                    <div class="whiteBtn" @click="toHandOver">交接小结</div>
                </van-col>
                <van-col span="6">
                    <div class="btn" @click="handClassPopup">交接班</div>
                </van-col>
            </van-row>
        </div>

        <!-- 运行值班信息 -->
        <van-popup v-model="dutyDetailShow" position="top" style="margin-top:46px;">
            <div class="container-text popup-main">
                <van-cell-group v-for="(item,i) in dutyDetailList" :key="i">
                    <van-cell :title="item.text1" :value="item.text2" />
                </van-cell-group>
            </div>
            <div class="popup-footer" style="margin-left:40%">
                <span class="specialText">添加临时成员</span>
                <span class="specialText" @click="toOperatStand">查看运行规程</span>
            </div>
        </van-popup>

        <!-- 运行值班信息 -->
        <van-popup v-model="handClassPopupShow" style="height:150px;width:60%;padding: 10px;border-radius:5px;">
            <div class="flex-around" style="height:50%">
                <img src="../../images/image125-testRecord.png" style="height:3rem;width:3rem;">
            </div>
            <div class="flex-around" style="height:25%">
                是否开启录音功能
            </div>
            <div class="flex-around" style="height:25%">
                <button class="reset-btn" style="width:30%" @click="handClassPopupShow=false">取消</button>
                <button class="confirm-btn" style="width:30%" @click="toHandClass">确定</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                activeName: 'a',
                dutyDetailShow: false,    //展示值班详情
                handClassPopupShow: false, //展示交接班详情
                shrinkUrl: require('../../images/icon_pm_shrink_black.png'),
                dropdownUrl: require('../../images/icon_pm_dropdown.png'),
                dutyDetailList: [{
                    text1: '天气情况',
                    text2: '晴23℃'
                }, {
                    text1: '接班时间',
                    text2: '2021/04/05 12:30'
                }, {
                    text1: '当前班次',
                    text2: '运维三班'
                }, {
                    text1: '值班长',
                    text2: '刘道之'
                }, {
                    text1: '副值长',
                    text2: '徐志勇'
                }, {
                    text1: '值班人员',
                    text2: '刘道之、徐志勇、张三、王五'
                }],
                maintainList: [{
                    text: '小海地变电站防小措施记录',
                    statue: '未完成',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }, {
                    text: '红外测温记录',
                    statue: '',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }, {
                    text: '开关柜局放检测记录',
                    statue: '',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }],
                unCompleteList: [{
                    text: '小海地变电站防小措施记录',
                    statue: '未完成',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }, {
                    text: '红外测温记录',
                    statue: '未完成',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }, {
                    text: '开关柜局放检测记录',
                    statue: '未完成',
                    subText: '交花园山变电站 交流110KV',
                    recorder: '唐晓东',
                    recordTime: '2021/06/09 09:21'
                }]
            }
        },
        filters: {
            timeFilter(t) {
                return t
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
            },
            /**
             * @description: 跳转到添加页面
             */
            toAdd() {
                this.$router.push({
                    name: 'addRecord'
                })
            },
            /**
             * @description: 跳转到查看运行规程
             */
            toOperatStand() {
                this.$router.push({
                    name: 'operatStand'
                })
            },
            /**
             * @description: 跳转到日志详情
             */
            tojournalDetail() {
                this.$router.push({
                    name: 'journalDetail'
                })
            },
            /**
             * @description: 展示录音开启
             */
            handClassPopup() {
                this.handClassPopupShow = true

            },
            /**
             * @description: 跳转到交接班
             */
            toHandClass() {
                this.$router.push({
                    name: 'handClass'
                })
            },
            /**
             * @description: 跳转到交接小结
             */
            toHandOver() {
                this.$router.push({
                    name: 'handOver'
                })
            },
            /**
             * @description: 展示值班详情
             */
            showDutyDetail() {
                this.dutyDetailShow = !this.dutyDetailShow
                console.log(this.dutyDetailShow);
            },
            /**
             * @description: 重置筛选
             */
            reset() {
            },
            /**
             * @description: 跳转到录音详情
             */
            confirm() {
                this.$router.push({
                    name: 'addRecord'
                })
            },
        }

    }
</script>

<style>
    #dutyHome {
        width: 100%;
        height: 100vh;
        font-size: 0.9375rem;
    }

    #dutyHome .van-nav-bar__text {
        color: #333333;
    }

    #dutyHome .van-tab--active {
        color: #0EB295;
    }

    #dutyHome .van-tabs__line {
        background-color: #0EB295;
    }

    #dutyHome .padding-outbox {
        padding: 10px;
        background-color: #F5F6F7;
        height: calc(100% - 4rem - 110px);
        overflow: auto;
    }

    #dutyHome .padding-inbox {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    #dutyHome .padding-top {
        padding-top: 10px
    }

    #dutyHome .flexItem {
        display: flex;
        align-items: center;
    }

    #dutyHome .grayText {
        color: #999999;
        font-size: 0.8125rem;
    }

    #dutyHome .staticText {
        color: #666666;
        font-size: 0.8125rem;
        /* min-width: 65px; */
        padding-left: 0.25rem;
    }

    #dutyHome .statueText {
        border: 1px solid red;
        color: red;
        text-align: center;
        border-radius: 10px;
    }

    #dutyHome .dynamicText {
        color: #333333;
        font-weight: bold
    }

    #dutyHome .flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #dutyHome .flex-around {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #dutyHome .padding-bottom {
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    #dutyHome .container-text {
        font-size: 0.8125rem;
        color: #999999
    }

    #dutyHome .specialText {
        font-size: 0.8125rem;
        color: #0EB295;

    }

    #dutyHome .popup-main {
        height: calc(100% - 4rem);
        overflow: auto;
        font-size: 0.9375rem;
    }

    #dutyHome .popup-footer {
        height: 4rem;
        font-size: 0.9375rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
    }

    #dutyHome .reset-btn {
        border-radius: 4px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        color: #666666;
        font-size: 0.9375rem;
        text-align: center;
    }

    #dutyHome .confirm-btn {
        border-radius: 4px;
        background: #0EB295;
        border: 1px solid #0EB295;
        color: #fff;
        font-size: 0.9375rem;
        color: #fff;
        text-align: center;
    }

    #dutyHome .whiteBtn {
        background: #fff;
        border: 1px solid #0EB295;
        border-radius: 4px;
        line-height: 2rem;
        border-top: none;
        border-right: none;
        color: #0EB295;
        font-size: 0.9375rem;
        text-align: center;
    }

    #dutyHome .btn {
        border-radius: 4px;
        background: #0EB295;
        line-height: 2rem;
        border: 1px solid #0EB295;
        color: #fff;
        font-size: 0.9375rem;
        text-align: center;
    }

    #dutyHome .van-row {
        padding-top: 1rem;
    }

    #dutyHome [class*=van-hairline]::after {
        border: none
    }

    #dutyHome .van-overlay {
        top: 46px;
    }


    #dutyHome .van-cell {
        color: #666666;
        font-size: 0.8125rem;
    }

    #dutyHome .van-cell__value {
        color: #333333;
        font-size: 0.8125rem;
    }
</style>